<template>
  <div>
    <!-- Hero Section -->
    <section class="relative py-20 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="text-center">
          <div
            class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-800 text-sm font-medium mb-8 animate-fade-in">
            <span class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></span>
            AI驱动的智能路况分析
          </div>

          <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 animate-slide-up">
            基于车载视频图像的
            <span class="gradient-text">动态路况分析</span>
          </h1>

          <p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed animate-slide-up">
            通过先进的AI技术实时分析道路通行状态，为您的出行提供准确的路况信息，让每一次出行都更加智能高效
          </p>

          <div class="flex flex-col sm:flex-row gap-4 justify-center animate-slide-up">
            <button @click="navigateToDetection" class="btn btn-primary text-lg px-8 py-4">
              <span class="mr-2 flex-shrink-0">🚀</span>
              <span>立即开始检测</span>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">强大的功能特性</h2>
          <p class="text-lg text-gray-600 max-w-2xl mx-auto">我们提供全面的路况分析解决方案，满足不同场景的需求</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 图像检测卡片 -->
          <div @click="navigateToDetection" class="group card p-8 cursor-pointer transition-all duration-300">
            <div
              class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center mb-6 group-hover:animate-bounce-gentle">
              <span class="text-3xl">📸</span>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-4">智能图像路况检测</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              支持单张或批量上传图片，AI将快速分析道路通行状态，提供准确的畅通、缓行或拥堵判断
            </p>
            <div class="flex items-center text-blue-600 font-medium group-hover:text-blue-700">
              开始检测
              <svg
                class="w-5 h-5 ml-2 transition-all duration-200"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 批量分析卡片 -->
          <div @click="navigateToDetection" class="group card p-8 cursor-pointer transition-all duration-300">
            <div
              class="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-2xl flex items-center justify-center mb-6 group-hover:animate-bounce-gentle">
              <span class="text-3xl">📁</span>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-4">批量图像分析</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              支持批量上传多张图片，高效处理大量数据，生成详细的分析报告和统计信息
            </p>
            <div class="flex items-center text-green-600 font-medium group-hover:text-green-700">
              批量分析
              <svg
                class="w-5 h-5 ml-2 transition-all duration-200"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>

          <!-- 模型设置卡片 -->
          <div @click="navigateToDetection" class="group card p-8 cursor-pointer transition-all duration-300">
            <div
              class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 group-hover:animate-bounce-gentle">
              <span class="text-3xl">⚙️</span>
            </div>
            <h3 class="text-xl font-bold text-gray-900 mb-4">智能模型设置</h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              灵活调整模型参数，选择最适合的检测算法，优化检测精度和处理速度
            </p>
            <div class="flex items-center text-purple-600 font-medium group-hover:text-purple-700">
              参数设置
              <svg
                class="w-5 h-5 ml-2 transition-all duration-200"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Stats Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
          <div class="text-center">
            <div class="text-4xl font-bold gradient-text mb-2">95%</div>
            <div class="text-gray-600">检测准确率</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold gradient-text mb-2">200ms</div>
            <div class="text-gray-600">平均处理时间</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold gradient-text mb-2">10K+</div>
            <div class="text-gray-600">已处理图片</div>
          </div>
          <div class="text-center">
            <div class="text-4xl font-bold gradient-text mb-2">24/7</div>
            <div class="text-gray-600">全天候服务</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

const navigateToDetection = () => {
  router.push("/image-detection");
};
</script>
